<template>
  <el-container>
    <el-header>
      <el-tabs v-model="configType">
        <el-tab-pane v-for="c in configList" :key="c" :label="c.label" :name="c.api"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main style="padding: 0 20px 20px;">
      <div style="padding: 10px 0;" v-if="configType === 'basic'">
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">账户信息</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">登录账号</div>
                    <div class="content">
                      <el-input v-model="form.account" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">状态</div>
                    <div class="content">
                      <el-radio-group v-model="form.status">
                        <el-radio value="normal">正常</el-radio>
                        <el-radio value="disabled">禁用</el-radio>
                      </el-radio-group>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">登录密码</div>
                    <div class="content">
                      <el-input v-model="form.password"></el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">店铺类型</div>
                    <div class="content">
                      <el-radio-group v-model="form.shop_type">
                        <el-radio value="1" name="commerce">
                          电商商家
                        </el-radio>
                        <el-radio value="2" name="purchase">
                          团购商家
                        </el-radio>
                        <el-radio value="3" name="takeaway">
                          鲸囍生活
                        </el-radio>
                        <el-radio value="4" name="supply" >
                          供应链商家
                        </el-radio>
						<el-radio value="5" name="supply" >
                          外卖商家
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">邮箱号</div>
                    <div class="content">
                      <el-input v-model="form.email">
                      </el-input>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">绑定手机号</div>
                    <div class="content">
                      <el-input v-model="form.mobile" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">联系人</div>
                    <div class="content">
                      <el-input v-model="form.contact_name" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">联系电话</div>
                    <div class="content">
                      <el-input v-model="form.phone" />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="padding: 10px 0;" v-if="configType === 'company'">
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">公司主体</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">主体类型</div>
                    <div class="content">
                      <el-select v-model="form.entity_type" placeholder="请选择主体类型">
                        <el-option label="企业" value="company" />
                        <el-option label="个人" value="individual" />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">主体名称</div>
                    <div class="content">
                      <el-input v-model="form.entity_name" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">营业执照</div>
                    <div class="content">
                      <sa-uploader v-model="form.business_license" fileType="image"></sa-uploader>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <div class="title">法人信息</div>
            <div class="bottom">
              <div class="info">
                <el-row :gutter="24">
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">证件类型</div>
                    <div class="content">
                      <div>居民身份证</div>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">法人名称</div>
                    <div class="content">
                      <el-input v-model="form.legal_person_name" />
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label">证件照片</div>
                    <div class="content sa-flex">
                      <sa-uploader v-model="form.legal_id_images" fileType="image"></sa-uploader>
                      <div class="sa-m-l-10">人像照</div>
                    </div>
                  </el-col>
                  <el-col class="item sa-col-12" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="label"></div>
                    <div class="content sa-flex">
                      <sa-uploader v-model="form.legal_id_imagess" fileType="image"></sa-uploader>
                      <div class="sa-m-l-10">国徽照</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="apply">添加</el-button>
    </el-footer>
  </el-container>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { api } from './business.service';
  import { cloneDeep } from 'lodash';

  const configType = ref('basic');
  const configList = [
    { label: '基本信息', api: 'basic' },
    { label: '公司信息', api: 'company' },
  ];

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const form = reactive({
    account: '',
    status: '',
    password: '',
    shop_type: '',
    email: '',
    mobile: '',
    contact_name: '',
    entity_type: '',
    entity_name: '',
    legal_person_name: '',
    legal_id_images: '',
    legal_id_imagess: '',
  });

  const apply = async () => {
    let temp = cloneDeep(form);
	if  (temp.shop_type.includes('4')) {
		temp['supplier_id '] = 1
    }
    temp.legal_id_images = [form.legal_id_images, form.legal_id_imagess].join(',');
    // temp.shop_type = temp.shop_type.join(',');
    delete temp.legal_id_imagess;
    const { error, data } = await api.add_account(temp);
    if (error === 0) {
      emit('modalCallBack', {
        event: 'confirm',
      });
    }
  };
</script>

<style scoped lang="scss">
  .el-header {
    --el-header-height: fit-content;
  }

  .title {
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: var(--sa-subtitle);
    margin-bottom: 8px;
  }

  .bottom {
    padding: 16px;
    background: var(--sa-table-header-bg);
    border-radius: 8px;
    margin-bottom: 20px;

    .nickname {
      line-height: 20px;
      font-size: 20px;
      font-weight: 500;
      color: var(--sa-subtitle);
    }

    .id {
      line-height: 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--sa-subfont);
    }

    .info {
      padding: 16px 16px 0;
      background: var(--sa-background-assist);
      border-radius: 4px;

      .item {
        margin-bottom: 16px;

        .label {
          height: 12px;
          line-height: 12px;
          font-size: 12px;
          font-weight: 500;
          color: var(--sa-subfont);
          margin-bottom: 8px;
        }

        .content {
          line-height: 32px;
          font-size: 14px;
          font-weight: 400;
          color: var(--sa-subtitle);
        }
      }
    }
  }

  .third-oauth {
    .info {
      padding: 20px 16px 0;

      .item {
        margin-bottom: 24px;

        img {
          width: 32px;
          height: 32px;
        }

        .name {
          color: var(--sa-font);
        }

        .none {
          color: #999;
        }
      }
    }
  }

  .log {
    .bottom {
      padding: 0;
      background: var(--sa-background-assist);

      :deep() {
        .el-tabs__nav-wrap::after {
          height: 0;
        }
      }

      .sa-table {
        height: 300px;
      }

      :deep() {
        .oper-type {
          font-size: 12px;
          color: var(--sa-subtitle);
        }

        .system {
          font-size: 14px;
          color: var(--sa-subtitle);

          img {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
        }
      }
    }
  }

  @media only screen and (max-width: 1200px) {
    @for $i from 0 through 24 {
      .sa-col-#{$i} {
        max-width: calc(calc($i * 100%) / 24) !important;
        flex: 0 0 calc(calc($i * 100%) / 24) !important;
      }
    }
  }

  :deep() .el-checkbox {
    margin-right: 10px;
  }
</style>